<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-searchbar  (click)="tolistPage()"></ion-searchbar>
    <ion-buttons slot="primary">
      <ion-button (click)="addSchedualPage()">
        <ion-icon slot="icon-only" name="add"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>

  <div class="ion-margin">
    <div class="customerwrap ion-margin">

      <ion-toolbar color="primary">
        <ion-title slot="start">{{viewT | date:'yyyy-MM-dd'}}</ion-title>
        <ion-buttons slot="primary">
          <ion-button  (click)="today()" >Today</ion-button>
        </ion-buttons>
      </ion-toolbar>
      <calendar [eventSource]="myScheduleList"
                [calendarMode]="calendar.calendarModel"
                [currentDate]="calendar.currentDate "
                [dateFormatter]="calendar.dateFormatter"
                [showEventDetail]=false
                [monthviewDisplayEventTemplate]="template"

                (onCurrentDateChanged)="onCurrentDateChanged($event)"
                (onEventSelected)="onEventSelected($event)"
                (onTitleChanged)="onViewTitleChanged($event)"
                (onTimeSelected)="onTimeSelected($event)"
                [startHour]="'00:00'"
                [endHour]="'23:59:59'"
                [startingDayWeek]="1"
                step="30">
      </calendar>

      <ng-template #template let-view="view" let-row="row" let-col="col">
        <div (click)="showEventList(view.dates[row * 7 + col].date)">
        <nzm-badge [text]="view.dates[row * 7 + col].events.length">
        </nzm-badge>
        <div>{{ view.dates[row * 7 + col].label }}</div>
        </div>
      </ng-template>

      <!--<ng-template-->
        <!--#detialtemplate-->
        <!--let-showEventDetail="showEventDetail"-->
        <!--let-selectedDate="selectedDate"-->
        <!--let-noEventsLabel="noEventsLabel"-->
      <!--&gt;-->
        <!--<div class="" *ngFor="let item of selectedDate.events">-->
          <!--<div-->
            <!--class="new-item row no-wrap"-->
            <!--(click)="onOpenDetail(item.scheduleID)"-->
          <!--&gt;-->
            <!--<div class="left-item"></div>-->
            <!--<div class="middle-item col between-span">-->
              <!--<div class="title">{{ item.title }}</div>-->
              <!--<div class="time">-->
                <!--<div>{{ item.contactDate }}</div>-->
              <!--</div>-->
            <!--</div>-->
            <!--<div class="right-item">-->
              <!--<div class="title">{{ item.title }}</div>-->
              <!--<div class="content">-->
                <!--<div class="row middle-span">-->
                  <!--目标客户:{{ item.targetName }}-->
                <!--</div>-->
                <!--<div class="row middle-span">-->
                  <!--客户等级:{{ item.targetLeve }}-->
                <!--</div>-->
                <!--<div class="row middle-span">状态:{{ item.statu }}</div>-->
                <!--<div class="row middle-span">-->
                  <!--联系方式:{{ item.contactWay }}-->
                <!--</div>-->
                <!--<div class="row middle-span">-->
                  <!--推荐产品:{{ item.recommendProduct }}-->
                <!--</div>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
      <!--</ng-template>-->
    </div>
  </div>
</ion-content>
